@width:  220px;
@height: 70px;
@border: 4px;

@violet: #08d7a2;
@orange: #6a59ff;

@deg:  120deg;
@size: 400%;
@dur:  3s;

.clearfix { 
    *zoom: 1; 
} 
.clearfix:before, .clearfix:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
} 
.clearfix:after { 
    clear: both; 
}
   
.list_more {
    display: block;
    width: 387px;
    height: 42px;
    line-height: 42px;
    margin: 16px auto 0;
    background: #FFF;
    border: 1px solid #00B38A;
    font-size: 16px;
    color: #00b38a;
    text-align: center;
    -webkit-transition: background .3s,color .1s;
    -moz-transition: background .3s,color .1s;
    -ms-transition: background .3s,color .1s;
    -o-transition: background .3s,color .1s;
}
.list_more:hover {
    color: #fff;
    background: #00B38A;
}

.fl{
    float: left;
}
.fr{
    float: right;
}

img {
    border: 0;
    vertical-align: top;
    display: inline-block;
}

a{
    color: #555;
    background-color: transparent;
    text-decoration: none;
}

.clip-frame(@width, @height, @border) {
-webkit-clip-path: polygon(0% 100%, @border 100%, @border @border, @width - @border @border, @width - @border @height - @border, @border @height - @border, @border 100%, 100% 100%, 100% 0%, 0% 0%);
}


/* helpers */

.absolute-centering {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.text-formatting {
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    letter-spacing: 2px;
    line-height: 70px;
    font-family: 'Squada One', cursive;
    font-size: 28px;
}

/* motion */

@keyframes gradient { 
    0%   { background-position: 14% 0%; }
    50%  { background-position: 87% 100%; }
    100% { background-position: 14% 0%; }
}

@keyframes border {
  0% { -webkit-clip-path: polygon(/*1*/ 0% 100%, /*2*/ @border 100%, /*3*/ @border @border, /*4*/ @width - @border @border, /*5*/ @width - @border @height - @border, /*6*/ @border @height - @border, /*7*/ @border 100%, /*8*/ 100% 100%, /*9*/ 100% 0%, /*10*/ 0% 0%); }
  25% { -webkit-clip-path: polygon(/*1*/ 0% 100%, /*2*/ @border 100%, /*3*/ @border @border, /*4*/ @width - @border @border, /*5*/ @width - @border @height - @border, /*6*/ @width - @border @height - @border, /*7*/ @width - @border 100%, /*8*/ 100% 100%, /*9*/ 100% 0%, /*10*/ 0% 0%); }
  50% { -webkit-clip-path: polygon(/*1*/ 0% 100%, /*2*/ @border 100%, /*3*/ @border @border, /*4*/ @width - @border @border, /*5*/ @width - @border @border, /*6*/ @width - @border @border, /*7*/ @width - @border @border, /*8*/ @width - @border @border, /*9*/ 100% 0%, /*10*/ 0% 0%); }
  75% { -webkit-clip-path: polygon(/*1*/ 0% 100%, /*2*/ @border 100%, /*3*/ @border @border, /*4*/ @border @border, /*5*/ @border @border, /*6*/ @border @border, /*7*/ @border @border, /*8*/ @border @border, /*9*/ @border 0%, /*10*/ 0% 0%); }
  100%  { -webkit-clip-path: polygon(/*1*/ 0% 100%, /*2*/ @border 100%, /*3*/ @border 100%, /*4*/ @border 100%, /*5*/ @border 100%, /*6*/ @border 100%, /*7*/ @border 100%, /*8*/ @border 100%, /*9*/ @border 100%, /*10*/ 0% 100%); }
}

.container{
    padding-bottom: 39px;
    .containHeader{
        position: relative;
        .searchWrapper{
            background: #F2F5F4;
            padding: 30px 0 28px;
            min-width: 1200px;
            .search_input{
                width: 726px;
                left:50%;
                margin-left: -363px;
            }
            .button{
                display: block;
                .absolute-centering;
                width: @width;
                height: @height;
                .text-formatting;
                z-index: 1;
                &:after {
                    content: '';
                    .absolute-centering;
                    background: linear-gradient(@deg, @violet, @orange, @violet);
                    background-size: @size @size;
                    .clip-frame(@width, @height, @border);
                    animation:gradient @dur ease-in-out infinite, border 1s forwards ease-in-out reverse;
                }
                
                & > span {
                    display: block;
                    background: linear-gradient(@deg, @violet, @orange, @violet);
                    background-size: @size @size;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    animation:gradient @dur ease-in-out infinite;
                }
            }
        }
    }
    .containerBody{
        margin: 26px auto 0;
        width: 1200px;
        .sidebar{
            float: left;
            position: relative;
            width: 528px;
            margin-left: -15px;
            height: 346px;
            overflow-y: scroll;
            .item_con_list{
                display: block;
                .con_list_item{
                    position: relative;
                    color: #555;
                    border: 1px solid #ededed;
                    margin-bottom: 14px;
                    .list_item_top{
                        width: 508px;
                        height: 78px;
                        padding: 14px 15px 0;
                        .position{
                            float: left;
                            width: 270px;
                            margin-right: 10px;
                            .p_top{
                                height: 34px;
                                line-height: 34px;
                                .position_link{
                                    h3{
                                        float: left;
                                        max-width: 272px;
                                        margin: 0;
                                        font-size: 16px;
                                        color: #00b38a;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        word-wrap: normal;
                                        max-width: 140px;
                                    }
                                    .location{
                                        font-size: 16px;
                                        color: #00b38a;
                                        float: left;
                                        margin: 0 3px;
                                        em{
                                            font-style: normal;
                                        }
                                    }
                                }
                                .formatTime{
                                    float: left;
                                    margin: 0 3px;
                                    color: #999;
                                }
                            }
                            .p_bot{
                                height: 24px;
                                line-height: 24px;
                                .li_b_l{
                                    font-size: 14px;
                                    color: #555;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    word-wrap: normal;
                                    span{
                                        margin-right: 1em;
                                        font-size: 16px;
                                        color: #fd5f39;
                                    }
                                }
                            }
                        }
                        .company{
                            float: left;
                            width: 128px;
                            margin-right: 8px;
                            .company_name{
                                height: 34px;
                                line-height: 34px;
                                a{
                                    display: inline-block;
                                    max-width: 180px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    word-wrap: normal;
                                    color: #00b38a;
                                    font-size: 16px;
                                    vertical-align: middle;
                                }
                            }
                            .industry{
                                height: 24px;
                                line-height: 24px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                word-wrap: normal;
                            }                        
                        }
                        .com_logo{
                            float: left;
                            width: 62px;
                            a{
                                display: block;
                                img{
                                    display: block;
                                    width: 60px;
                                    height: 60px;
                                    border: 1px solid #f5f5f5;
                                }
                            }
                        }
                    }
                    .list_item_bot{
                        width: 498px;
                        height: 40px;
                        padding: 0 15px;
                        background-color: #fafafa;
                        .li_b_l{
                            float: left;
                            width: 260px;
                            height: 40px;
                            margin-right: 20px;
                            line-height: 40px;
                            overflow: hidden;
                            span{
                                display: inline-block;
                                max-width: 108px;
                                height: 20px;
                                padding: 0 5px;
                                font-size: 12px;
                                line-height: 20px;
                                color: #555;
                                border: 1px solid #dcdcdc;
                                border-radius: 3px;
                                vertical-align: middle;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                word-wrap: normal;
                                margin-right: 6px;
                            }
                        }
                        .li_b_r{
                            float: left;
                            max-width: 198px;
                            height: 40px;
                            line-height: 40px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            word-wrap: normal;
                            span{
                                margin-right: 2px;
                            }
                        }
                    }
                }
            }
        }
        .moduleTabs{
            position: relative;
            margin-top: 52px;
            margin-bottom: 14px;
            font-size: 0;
            border-bottom: 1px solid #E8E8E8;
            background: #fff;
            color: #333;
            padding: 14px 0;
            margin-right: 58px;
            font-size: 16px;
        }
        .carouselStyle{
            position: relative;
            margin-left: 540px;
            margin-top: 20px;
            height: 346px;
            overflow: hidden;
            background-color: #F2F5F4;
            .ant-carousel .slick-slide {
                text-align: center;
                height: 160px;
                line-height: 160px;
                background: #364d79;
                overflow: hidden;
              }
              .ant-carousel .slick-slide h3 {
                color: #fff;
              }
              img{
                  width: 100%;
                  height: 346px;
              }
        }
    }
}